<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备列表</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/deviceList.css">
    <link rel="stylesheet" href="css/bombs.css">
    <link rel="stylesheet" href="js/plugin/laydate-v1.1/laydate/need/laydate.css">
</head>
<body>
<div id="devicePage">
    <div class="container">
        <div class="top">
            <div class="top-title fl">
                <div>设备管理</div>
            </div>
            <ul class="top-list fr">
                <li class="active"><a href="deviceList.html">设备列表</a></li>
                <li><a href="#">分析报表</a></li>
            </ul>
        </div>

        <!-- 筛选栏 -->
        <ul id="filter-box">
            <li class="fl active">全部</li>
            <li class="fl">
                故障
                <span>(2117)</span>
            </li>
            <li class="fl">
                报警
                <span>(22117)</span>
            </li>
            <li class="fl">
                预保养
                <span>(2117)</span>
            </li>
            <li class="fl">
                保养
                <span>(2117)</span>
            </li>
            <li class="fl">
                超负荷
                <span>(2117)</span>
            </li>
            <li class="fl">
                在线
                <span>(2117)</span>
            </li>
            <li class="fl">
                离线
                <span>(2117)</span>
            </li>
        </ul>

        <div class="main">
            <!-- 操作栏（全选、新增、编辑、删除、分享、布局切换按钮） -->
            <div class="handle-box">
                <div class="handle-box-left fl">
                    <ul>
                        <li>
                            <input type="checkbox" id="chooseAll">
                            <label for="chooseAll">全选</label>

                        </li>
                        <li class="add-btn">
                            <span class="handle-icon"></span>
                            新增
                        </li>
                        <li class="edit-btn">
                            <span class="handle-icon"></span>
                            编辑
                        </li>
                        <li class="del-btn">
                            <span class="handle-icon"></span>
                            删除
                        </li>
                        <li class="share-btn">
                            <span class="handle-icon"></span>
                            分享
                        </li>

                    </ul>
                </div>

                <div class="handle-box-right fr">
                    <!-- 布局切换按钮 -->
                    <ul class="layput-change fl">
                        <li class="gridLi active">
                            <a class="grid-icon"></a>
                        </li>
                        <li class="listLi">
                            <a class="list-icon"></a>
                        </li>
                    </ul>

                    <!--上一页、下一页-->
                    <div class="page-change fl">
                        <a class="pre"></a>
                        <span class="page-num">
                         <b class="orange">1</b>/<b>100</b>
                     </span>
                        <a class="next"></a>
                    </div>
                </div>
            </div>

            <!-- 状态提示栏 -->
            <div class="tips-box">
                <div class="tip-left fl">
                    <ul class="status">
                        <li>
                            <span class="tip-icon alert"></span>
                            <span class="tip-text">机器报警</span>
                        </li>
                        <li>
                            <span class="tip-icon stop"></span>
                            <span class="tip-text">机器停止</span>
                        </li>
                        <li>
                            <span class="tip-icon normal"></span>
                            <span class="tip-text">正常运行</span>
                        </li>
                        <li>
                            <span class="signal-icon on"></span>
                            <span class="tip-text">在线</span>
                        </li>
                        <li>
                            <span class="signal-icon off"></span>
                            <span class="tip-text">离线</span>
                        </li>
                    </ul>
                </div>
                <div class="tip-right fr">
                    <span class="close-text fl">关闭提示</span>
                    <span class="close-icon fl"></span>
                </div>
            </div>

            <!-- 布局转换 -->
            <div class="layout-option">
                <!-- 豆腐块布局 -->
                <div class="grid-layout">
                    <ul class="device-list">
                        <li class="device-list-item">
                            <a href="#">
                                <!-- 设备编码及状态 -->
                                <div class="item-top">
                                    <div class="status-icon alert"></div>
                                    <div class="device-code fl">
                                        <input type="checkbox" name="chooseDevice">
                                        <label>编码 <span>BD105291</span></label>
                                    </div>
                                    <div class="signal-icon on"></div>
                                </div>

                                <!-- 图表 -->
                                <div class="pie-box">
                                    <div class="pie-bg">
                                        <div id="lineargradient-pie" style="width:94px; height:94px"></div>
                                    </div>
                                </div>

                                <!-- 电流、电压、温度参数 -->
                                <div class="device-param">
                                    <ul>
                                        <li>
                                            <p class="pram-num">1.8Mpa</p>
                                            <p class="pram-text">压力</p>
                                        </li>
                                        <li>
                                            <p class="pram-num">120℃</p>
                                            <p class="pram-text">温度</p>
                                        </li>
                                        <li>
                                            <p class="pram-num">300A</p>
                                            <p class="pram-text">电流</p>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 设备信息 -->
                                <div class="customer-msg">
                                    <h4 class="customer-name">青岛海世豪塑胶有限公司</h4>
                                    <div class="model-msg">
                                        <div class="Number fl">编号: <span>LG17033046</span></div>
                                        <div class="Model fr">型号： <span>BD-22EPM</span></div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 列表布局 -->
                <div class="list-layout">
                    <ul class="device-list">
                        <li class="device-list-item">
                            <a href="#">
                                <!-- 设备编码及状态 -->
                                <div class="item-top">
                                    <div class="status-icon alert"></div>
                                    <div class="device-code fl">
                                        <input type="checkbox" name="chooseDevice">
                                        <label>编码 <span>BD105291</span></label>
                                    </div>
                                    <div class="signal-icon on"></div>
                                </div>

                                <div class="item-bottom">
                                    <!-- 电流、电压、温度参数 -->
                                    <div class="device-param fl">
                                        <ul>
                                            <li>
                                                <p class="pram-num">1.8Mpa</p>
                                                <p class="pram-text">压力</p>
                                            </li>
                                            <li>
                                                <p class="pram-num">120℃</p>
                                                <p class="pram-text">温度</p>
                                            </li>
                                            <li>
                                                <p class="pram-num">300A</p>
                                                <p class="pram-text">电流</p>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 设备信息 -->
                                    <div class="customer-msg fr">
                                        <h4 class="customer-name">青岛海世豪塑胶有限公司</h4>
                                        <ul class="model-msg">
                                            <li class="Number">编号: <span>LG17033046</span></li>
                                            <li class="Model">型号： <span>BD-22EPM</span></li>
                                            <li class="card-num">通讯卡号： <span>46004612325869539</span></li>
                                            <li class="power">设备功率： <span>132KW</span></li>
                                            <li class="creator">创建者： <span>张山</span></li>
                                            <li class="create-date">创建日期： <span>2017-4-20</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="device-list-item">
                            <a href="#">
                                <!-- 设备编码及状态 -->
                                <div class="item-top">
                                    <div class="status-icon normal"></div>
                                    <div class="device-code fl">
                                        <input type="checkbox" name="chooseDevice">
                                        <label>编码 <span>BD105291</span></label>
                                    </div>
                                    <div class="signal-icon on"></div>
                                </div>

                                <div class="item-bottom">
                                    <!-- 电流、电压、温度参数 -->
                                    <div class="device-param fl">
                                        <ul>
                                            <li>
                                                <p class="pram-num">1.8Mpa</p>
                                                <p class="pram-text">压力</p>
                                            </li>
                                            <li>
                                                <p class="pram-num">120℃</p>
                                                <p class="pram-text">温度</p>
                                            </li>
                                            <li>
                                                <p class="pram-num">300A</p>
                                                <p class="pram-text">电流</p>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 设备信息 -->
                                    <div class="customer-msg fr">
                                        <h4 class="customer-name">青岛海世豪塑胶有限公司</h4>
                                        <ul class="model-msg">
                                            <li class="Number">编号: <span>LG17033046</span></li>
                                            <li class="Model">型号： <span>BD-22EPM</span></li>
                                            <li class="card-num">通讯卡号： <span>46004612325869539</span></li>
                                            <li class="power">设备功率： <span>132KW</span></li>
                                            <li class="creator">创建者： <span>张山</span></li>
                                            <li class="create-date">创建日期： <span>2017-4-20</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="device-list-item">
                            <a href="#">
                                <!-- 设备编码及状态 -->
                                <div class="item-top">
                                    <div class="status-icon stop"></div>
                                    <div class="device-code fl">
                                        <input type="checkbox" name="chooseDevice">
                                        <label>编码 <span>BD105291</span></label>
                                    </div>
                                    <div class="signal-icon off"></div>
                                </div>

                                <div class="item-bottom">
                                    <!-- 电流、电压、温度参数 -->
                                    <div class="device-param fl">
                                        <ul>
                                            <li>
                                                <p class="pram-num">1.8Mpa</p>
                                                <p class="pram-text">压力</p>
                                            </li>
                                            <li>
                                                <p class="pram-num">120℃</p>
                                                <p class="pram-text">温度</p>
                                            </li>
                                            <li>
                                                <p class="pram-num">300A</p>
                                                <p class="pram-text">电流</p>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 设备信息 -->
                                    <div class="customer-msg fr">
                                        <h4 class="customer-name">青岛海世豪塑胶有限公司</h4>
                                        <ul class="model-msg">
                                            <li class="Number">编号: <span>LG17033046</span></li>
                                            <li class="Model">型号： <span>BD-22EPM</span></li>
                                            <li class="card-num">通讯卡号： <span>46004612325869539</span></li>
                                            <li class="power">设备功率： <span>132KW</span></li>
                                            <li class="creator">创建者： <span>张山</span></li>
                                            <li class="create-date">创建日期： <span>2017-4-20</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <!-- 分页器 -->
        <div class="paging-bg">
            <div class="fl page-msg">
                <ul>
                    <li>总<span class="orange">1342</span>条</li>
                    <li>每页<span class="orange">10</span>条</li>
                    <li>共<span class="orange">135</span>页</li>
                </ul>
            </div>
            <div class="fr" id="pagination"></div>
        </div>

    </div>

    <!-- 弹框合集 -->
    <div class="bomb-boxs" id="bomb-boxs" style="display: none">
        <!-- 新增弹框 -->
        <div class="bomb addbomb">
            <div class="top">
                <div class="top-title fl">
                    <div>新增设备</div>
                </div>
                <div class="close-btn fr">
                    <a class="close-icon"></a>
                </div>
            </div>
            <div class="form-con">
                <form action="post">
                    <div class="form-group">
                        <ul>
                            <li>
                                <span>*</span>
                                <label for="">客户：</label>
                                <input type="text" placeholder="请输入客户名称信息" class="long-input">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <span>*</span>
                                <label for="">控制器类型：</label>
                                <select name="" id="">
                                    <option value="">GPRSDTU-300</option>
                                    <option value="">GPRSDTU-300</option>
                                </select>
                            </li>
                            <li>
                                <span>*</span>
                                <label for="">控制器编号：</label>
                                <input type="text" placeholder="请输入控制器编号">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <label for="">设备型号：</label>
                                <input type="text" placeholder="请输入设备型号">
                            </li>
                            <li>
                                <label for="">设备编号：</label>
                                <input type="text" placeholder="请输入设备编号">
                            </li>
                            <li>
                                <label for="">设备功率：</label>
                                <input type="text" placeholder="请输入设备功率">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <label for="">地区：</label>
                                <input type="text" placeholder="请输入客户所在地区">
                            </li>
                            <li>
                                <label for="">行业：</label>
                                <input type="text" placeholder="请输入客户的行业">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <label for="">备注：</label>
                        <input type="text" placeholder="请输入需要备注的信息" class="long-input">
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <label for="">创建日期：</label>
                                <input class="laydate-icon" value="2017-4-20" onclick="laydate()">
                            </li>
                            <li>
                                <label for="">出厂日期：</label>
                                <input class="laydate-icon" value="2014-4-20" onclick="laydate()">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group btn-form-group">
                        <a type="button" class="btn btn-submit">确定</a>
                        <a type="button" class="btn btn-quit">取消</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 编辑弹框 -->
        <div class="bomb editbomb">
            <div class="top">
                <div class="top-title fl">
                    <div>编辑设备</div>
                </div>
                <div class="close-btn fr">
                    <a class="close-icon"></a>
                </div>
            </div>
            <div class="form-con">
                <form action="post">
                    <div class="form-group">
                        <ul>
                            <li>
                                <span>*</span>
                                <label for="">客户：</label>
                                <input type="text" placeholder="请输入客户名称信息" class="long-input">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <span>*</span>
                                <label for="">控制器类型：</label>
                                <select name="" id="">
                                    <option value="">GPRSDTU-300</option>
                                    <option value="">GPRSDTU-300</option>
                                </select>
                            </li>
                            <li>
                                <span>*</span>
                                <label for="">控制器编号：</label>
                                <input type="text" placeholder="请输入控制器编号">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <label for="">设备型号：</label>
                                <input type="text" placeholder="请输入设备型号">
                            </li>
                            <li>
                                <label for="">设备编号：</label>
                                <input type="text" placeholder="请输入设备编号">
                            </li>
                            <li>
                                <label for="">设备功率：</label>
                                <input type="text" placeholder="请输入设备功率">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <label for="">地区：</label>
                                <input type="text" placeholder="请输入客户所在地区">
                            </li>
                            <li>
                                <label for="">行业：</label>
                                <input type="text" placeholder="请输入客户的行业">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <label for="">备注：</label>
                        <input type="text" placeholder="请输入需要备注的信息" class="long-input">
                    </div>
                    <div class="form-group">
                        <ul>
                            <li>
                                <label for="">创建日期：</label>
                                <input class="laydate-icon" value="2017-4-20" onclick="laydate()">
                            </li>
                            <li>
                                <label for="">出厂日期：</label>
                                <input class="laydate-icon" value="2014-4-20" onclick="laydate()">
                            </li>
                        </ul>
                    </div>
                    <div class="form-group btn-form-group">
                        <a type="button" class="btn btn-submit">确定</a>
                        <a type="button" class="btn btn-quit">取消</a>
                    </div>
                </form>
            </div>
        </div>

        <!-- 分享弹框 -->
        <div class="bomb sharebomb">
            <div class="top">
                <div class="top-title fl">
                    <div>分享设备</div>
                </div>
                <div class="close-btn fr">
                    <a class="close-icon"></a>
                </div>
            </div>
            <div class="share-con">
                <div class="share-tab">
                    <ul>
                        <li class="psdShare active"><a href="#">加密分享</a></li>
                        <li class="occasionShare"><a href="#">临时分享</a></li>
                    </ul>
                </div>
                <div class="share-main">
                    <div class="link-box">
                        <label>链接：</label>
                        <input type="text" class="link-input">
                        <a type="button" class="link-btn">复制链接</a>
                        <span class="copy-tip">复制成功</span>
                    </div>
                    <div class="tel-box">
                        <label >手机号码：</label>
                        <input type="text" class="tel-input">
                    </div>
                    <p class="notes">注释：输入对方手机号码，可以直接将链接发送到客户手机</p>
                </div>
                <div class="share-btns">
                    <a type="button" class="btn btn-submit active">确认发送</a>
                    <a type="button" class="btn btn-quit">取消</a>
                </div>
                
            </div>
        </div>

        <!-- 删除弹框 -->
        <div class="bomb tipsbomb delbomb">
            <div class="close-btn fr">
                <a class="close-icon"></a>
            </div>
            <div class="tips-icon">
                <img src="image/trash.png">
            </div>
            <div class="tips-title">
                删除设备
            </div>
            <p class="isConfirm">你是否确认删除这台设备？</p>
            <div class="tips-button">确认</div>
        </div>

        <!-- 操作成功弹框 -->
        <div class="bomb tipsbomb successbomb">
            <div class="close-btn fr" >
                <a class="close-icon"></a>
            </div>
            <div class="tips-icon">
                <img src="image/btn_success.png">
            </div>
            <div class="tips-title">操作成功！</div>
            <div class="tips-button">知道了</div>
        </div>

        <!-- 操作失败弹框 -->
       <div class="bomb tipsbomb failurebomb">
            <div class="close-btn fr">
                <a class="close-icon"></a>
            </div>
            <div class="tips-icon">
                <img src="image/btn-failure.png">
            </div>
            <div class="tips-title">操作失败！</div>
            <div class="tips-button">知道了</div>
        </div>
    </div>

</div>

<script src="js/plugin/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/common.js"></script>
<script src="js/deviceList.js"></script>
<script src="js/bombs.js"></script>
<script src="js/mychart.js"></script>
<script src="js/plugin/laydate-v1.1/laydate/laydate.js"></script>
<script src="js/plugin/laypage-v1.3/laypage/laypage.js"></script>
<script src="js/pagination.js"></script>


<!--[if lte IE 9]>
<script src="js/plugin/jquery.placeholder.min.js"></script>
<script src="js/placeholder.js"></script>
<![endif]-->
</body>
</html>